<template>
  <scroll-view 
    class="refresh-list"
    :class="{ 'has-search': showSearch }"
    scroll-y 
    :refresher-enabled="enableRefresh"
    :refresher-triggered="refreshing"
    @refresherrefresh="onRefresh"
    @scrolltolower="onLoadMore"
    :lower-threshold="lowerThreshold"
  >
    <!-- 搜索栏插槽 -->
    <slot name="search" v-if="showSearch"></slot>
    
    <!-- 列表内容 -->
    <view class="list-content" :style="{ padding: contentPadding }">
      <slot name="content"></slot>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="showLoadMore">
        <uni-load-more :status="loadStatus" />
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="showEmpty">
        <slot name="empty">
          <image class="empty-image" :src="emptyImage" />
          <text class="empty-text">{{ emptyText }}</text>
          <button class="empty-btn" v-if="emptyButtonText" @click="onEmptyButtonClick">
            {{ emptyButtonText }}
          </button>
        </slot>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { computed } from 'vue';

// Props
interface Props {
  // 是否启用下拉刷新
  enableRefresh?: boolean;
  // 是否正在刷新
  refreshing?: boolean;
  // 是否有更多数据
  hasMore?: boolean;
  // 是否正在加载
  loading?: boolean;
  // 数据列表
  dataList?: any[];
  // 触发加载更多的距离
  lowerThreshold?: number;
  // 是否显示搜索栏
  showSearch?: boolean;
  // 内容内边距
  contentPadding?: string;
  // 空状态配置
  emptyImage?: string;
  emptyText?: string;
  emptyButtonText?: string;
}

const props = withDefaults(defineProps<Props>(), {
  enableRefresh: true,
  refreshing: false,
  hasMore: true,
  loading: false,
  dataList: () => [],
  lowerThreshold: 50,
  showSearch: false,
  contentPadding: '24rpx 32rpx',
  emptyImage: '/static/images/empty-default.png',
  emptyText: '暂无数据',
  emptyButtonText: '',
});

// Emits
const emit = defineEmits<{
  refresh: [];
  loadMore: [];
  emptyButtonClick: [];
}>();

// 计算属性
const loadStatus = computed(() => {
  if (props.loading) return 'loading';
  if (!props.hasMore) return 'noMore';
  return 'more';
});

const showLoadMore = computed(() => {
  return props.dataList.length > 0 && (props.hasMore || props.loading);
});

const showEmpty = computed(() => {
  return !props.loading && props.dataList.length === 0;
});

// 事件处理
const onRefresh = () => {
  emit('refresh');
};

const onLoadMore = () => {
  if (props.hasMore && !props.loading) {
    emit('loadMore');
  }
};

const onEmptyButtonClick = () => {
  emit('emptyButtonClick');
};
</script>

<style lang="scss" scoped>
.refresh-list {
  height: 100%;
  
  &.has-search {
    // 如果有搜索栏，可以调整样式
  }
}

.list-content {
  min-height: 100%;
}

.load-more {
  padding: 32rpx 0;
  text-align: center;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 32rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 32rpx;
  }
  
  .empty-btn {
    background: #1890FF;
    color: #fff;
    border: none;
    border-radius: 24rpx;
    padding: 16rpx 32rpx;
    font-size: 26rpx;
  }
}
</style>